<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			
			ul {
				display: inline-block;
				list-style: none;
			}
			#head{
				width:20%;
				height: 185px;
				background: gainsboro;
				border: 1px solid gray;
				padding: 0;
				float: left;
				border-right: none;
			}
			#head li{
				width:auto;
				height: 50px;
			padding: 5px;
			border:1px solid gray;				
				
			}
			#head li:nth-child(1){
				background:gray ;
			}
			#body{
				width:20%;
				height: 450px;
				
				padding: 0;
				float: left;
			}
			#body li{
				width:100%;
				height: 155px;
				padding:5px ;
				display: none;
				background: white;
				border: 1px solid gray;
				float: left;
				padding: 15px;
				
			}
			#body li:nth-child(1){
				display: block;
			}
			
		</style>
	</head>

	<body>
		
		<ul id='head'>
			<li>London</li>
			<li>Paris</li>
			<li>Tokyo</li>
		</ul>
		<ul id='body'>
			<li>London<br><p>London is the capital of England</p></li>
			<li>Paris<br>Paris is the capital of France</li>
			<li>Tokyo<br>Tokyo is the capital of Japan</li>
		</ul>
		<script>
			var head=document.getElementById('head');
			var body=document.getElementById('body');
			var hli=head.getElementsByTagName('li');
			var bli=body.getElementsByTagName('li');
			for(var i = 0; i <hli.length; i++) {
				hli[i].onclick = function() {
					for(var j = 0; j < hli.length; j++) {
						hli[j].style.background = 'gainsboro';
					}
					this.style.background = 'gray';
					for(var k=0;k<bli.length;k++){
						if(this==hli[k]){
							bli[k].style.display='block';
						}else{
							bli[k].style.display='none';
						}
					}
				}
			}
		</script>
	</body>